<template>
<div>
  <el-menu  class="el-menu-demo" mode="horizontal" active-text-color="#20a0ff" :default-active="curActive" router >
    <el-menu-item index="/media/layoutswitch">{{$t('message.medias.LayoutSwitch')}}</el-menu-item> 
    <el-menu-item index="/media/streamswitch" v-show="!system.isSpecialType">{{$t('message.medias.streamswitch')}}</el-menu-item> 
    <el-menu-item index="/media/streampull">{{system.isSpecialType ? $t('message.medias.netstreampull') : $t('message.medias.streampull')}}</el-menu-item> 
    <el-menu-item index="/media/streampush" v-show="!system.isSpecialType">{{$t('message.medias.streampush')}}</el-menu-item> 
     <el-menu-item index="/media/audioswitch" v-show="!system.isSpecialType">{{$t('message.medias.audioswitch')}}</el-menu-item>
    <el-menu-item v-show="isShowInDev" index="/media/inputdevsetting"> {{$t('message.medias.inputDevSetting')}} </el-menu-item>
    <el-menu-item v-show="isShowInCh" index="/media/inputchannelsetting">{{$t('message.medias.channelInputSetting')}}</el-menu-item> 
    <el-menu-item v-show="isShowOutDev" index="/media/outputdevsetting"> {{$t('message.medias.outputDevSetting')}} </el-menu-item>
    <el-menu-item v-show="isShowOutCh" index="/media/outputchannelsetting">{{$t('message.medias.channelOutputSetting')}}</el-menu-item> 
    <el-menu-item v-show="isShowMulticast" index="/media/multicast">{{$t('message.medias.multicast')}}</el-menu-item> 
    <el-menu-item index="/media/layoutmanage">{{$t('message.medias.LayoutManage')}}</el-menu-item> 
  </el-menu>
  <router-view  class="router-view-2" ></router-view>
</div>
</template>
<script>
import ebus from "@/libs/ebus";
import { mapState } from "vuex";
import debugCfg from "../../../../libs/debugCfg";
import router from "../../router";

export default {
  created() {
    ebus.emit('getTopics', this)
    // if (this.isShowInDev) {
    //   router.push("/media/inputdevsetting");
    // } else if (!this.isShowInDev && this.isShowInCh) {
    //   router.push("/media/inputchannelsetting");
    // } else if (!this.isShowInDev && !this.isShowInCh && this.isShowOutDev) {
    //   router.push("/media/outputdevsetting");
    // } else if (!this.isShowInDev && !this.isShowInCh && !this.isShowOutDev && this.isShowOutCh) {
    //   router.push("/media/outputchannelsetting");
    // } else {
    //   router.push("/media/multicast");
    // }
  },
  computed: {
    ...mapState(["media","system"]),
    isShowInDev() {
      if (this.media.inputDev.cnt) {
        return this.media.inputDev.cnt;
      } else {
        return false;
      }
    },
    isShowInCh() {
      if (this.media.inputChannel.cnt) {
        return this.media.inputChannel.cnt;
      } else {
        return false;
      }
    },
    isShowOutDev() {
      if (this.media.outputDev.cnt) {
        return this.media.outputDev.cnt;
      } else {
        return false;
      }
    },
    isShowOutCh() {
      if (this.media.outputChannel.cnt) {
        return this.media.outputChannel.cnt;
      } else {
        return false;
      }
    },
    isShowMulticast() {
      return  JSON.stringify(this.media.multicase) != "{}"      
    },
    curActive() {
      var path = "";
      path = this.$route.path;
      return path;
    }
  }
};
</script>

<style>
@import url("../../../../style/common.css");

</style>
